<template>
  <div>
    <div class="form-info-title">
      <!-- <span>未完成项解释</span> -->
      <div>
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="add">增加</el-button>
      </div>
    </div>
    <PageableTable
      :loading="false"
      :data="resources"
      :table-height="500"
      :disable-pageable="true"
      class="fixed-table-table"
    >
      <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
        <template slot-scope="scope">
          <column-render :render="column.render" :row="scope.row" :column="column" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" title="编辑" size="mini" icon="el-icon-edit" @click="edit(scope)" />
          <el-button type="text" title="删除" size="mini" icon="el-icon-delete" @click.native.prevent="remove(scope.$index)" />
        </template>
      </el-table-column>
    </PageableTable>
    <el-row>
      <el-col :span="24">
        <slot />
      </el-col>
    </el-row>
    <SelectDialog class="fixed-dialog-height" :title="title" :append-to-body="true" :show="showAdd" width="40%" @on-ok="ok" @on-cancel="cancel">
      <uncompleteDialog v-if="showAdd" ref="comp" :un-complete-data="unCompleteData" :operation-users="operationUsers" />
    </SelectDialog>
  </div>
</template>

<script>
import SelectDialog from '@neu/biz-core/components/SelectDialog'
import PageableTable from '@neu/biz-core/components/PageableTable'
import { unfinishedItemsByMonthId, updateUnfinishedItems } from '@neu/dcom-ui/api/monthWeekly.js'
import uncompleteDialog from '@neu/dcom-ui/views/monthWeekly/components/unCompleteDialog.vue'
import { detail } from '@neu/dcom-ui/api/monthWeekly'
export default {
  name: 'UnComplete',
  components: {
    uncompleteDialog,
    PageableTable,
    SelectDialog
  },
  props: {
    id: {
      required: true,
      type: Number
    }
  },
  data() {
    return {
      showAdd: false,
      title: '新增',
      resources: [],
      operationUsers: [],
      insideColumns: [
        { title: '未完成服务项', key: 'name', width: 200 },
        { title: '未完成原因', key: 'reason' },
        { title: '计划及处理方法', key: 'solution', width: 350 },
        { title: '运维工程师', key: 'operationName', width: 200 }
      ],
      /** 传递给子组件的数据*/
      unCompleteData: {
        name: '',
        reason: '',
        solution: '',
        operationCode: '',
        operationName: ''
      },
      editIndex: -1
    }
  },
  watch: {
    id: {
      handler() {
        if (this.id) {
          this.fetch()
        }
      },
      immediate: true
    }
  },

  methods: {
    fetch() {
      unfinishedItemsByMonthId(this.id).then(res => {
        this.resources = res.data
      })
      // 筛选单位名称下面的一线和机动工程师
      detail(this.id).then(response => {
        const { clientCode } = response.data
        const availableInstitutions = this.$store.getters['dcom/projectUserInfo'].institutions
        const institutions = availableInstitutions.find(e => e.code === clientCode)
        if (institutions) {
          this.operationUsers = [...institutions.residents, ...institutions.users]
          // this.operationUsers = [{ name: institutions.residentUserName, username: institutions.residentUserCode }, ...institutions.users]
        }
      })
    },
    add() {
      this.showAdd = true
      this.title = '新增'
    },
    ok() {
      this.showAdd = false
      if (this.editIndex === -1) {
        this.resources.push(this.$refs.comp.formItem)
      } else {
        this.resources.splice(this.editIndex, 1, this.$refs.comp.formItem)
        this.editIndex = -1
      }
    },
    cancel() {
      this.showAdd = false
      this.editIndex = -1
    },
    edit(scope) {
      this.title = '编辑'
      this.showAdd = true
      this.unCompleteData = scope.row
      this.editIndex = scope.$index
    },
    remove(index) {
      this.resources.splice(index, 1)
    },
    save() {
      return new Promise(resolve => {
        resolve(updateUnfinishedItems(this.id, this.resources))
      })
    }
  }
}
</script>
